import { defineComponent } from 'vue';
import { getKpi, historyScore } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import '../../../style/index.less';
import {
  ElDatePicker,
  ElDialog,
  ElPagination,
  ElTable,
  ElTableColumn
} from 'element-plus';
import ItemTable from './ItemTable';

export default defineComponent({
  name: 'Mykpi',
  setup() {
    const dialogVisible = ref(false);
    const tableData = ref([]);
    const itemTableRef = ref();
    const detailTitle = ref("绩效详情")
    const pageable = ref({
      page: 1,
      pageSize: 15,
      date: new Date(),
      total: 0,
      id: ''
    }) as AnyObject;
    const data = ref({}) as AnyObject;
    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      color: ['#ffc824', '#4a74ea', '#38d6a1', '#fc8844', '#ffb17d'],
      legend: {
        orient: 'vertical',
        left: '20%',
        y: 'center',
        icon: 'circle',
        itemWidth: 10,

        textStyle: {
          rich: {
            a: {
              fontSize: 18,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      series: [
        {
          name: '我的绩效',
          type: 'pie',
          radius: ['53%', '70%'],
          avoidLabelOverlap: false,
          center: ['70%', '50%'],
          // roseType: 'radius',
          itemStyle: {
            borderRadius: 2
          },
          label: {
            show: false,
            formatter: '{a|{c}}\n\r{b|{b}}',
            rich: {
              a: {
                fontSize: '24px',
                color: '#333333',
                fontWeight: 'bold'
              },
              b: {
                fontSize: '12px',
                color: '#666666'
              }
            }
          },

          labelLine: {
            show: true,
            length: 5
          },

          data: data.value.list
        }
      ]
    }) as any;

    getKpi().then((res) => {
      option.value.series[0].data = res.data.list;
      option.value.legend.formatter = (name: string) => {
        const findItem = data.value.list?.find(
          (_item: AnyObject) => _item.name === name
        );
        return name + `{a|${findItem?.value || ''}}`;
      };
      data.value = res.data;
    });
    const viewPerformanceDetail = ({date, id }: { date:string,id: number }) => {
      pageable.value.id = id;
      detailTitle.value = date+"绩效详情";
      nextTick(() => (itemTableRef.value.dialogVisible = true));
    };
    const viewDetail = () => {
      dialogVisible.value = true;
      pageable.value.date = new Date();
      getProductCase();
    };
    const handleSizeChange = (pageSize: number) => {
      pageable.value.pageSize = pageSize;
      getProductCase();
    };
    const handleCurrentChange = (page: number) => {
      pageable.value.page = page;
      getProductCase();
    };
    const selectYear = (date: Date) => {
      pageable.value.date = date;
      getProductCase();
    };
    function getProductCase() {
      const year = pageable.value.date.getFullYear();
      historyScore({
        page: pageable.value.page,
        pageSize: pageable.value.pageSize,
        year: year
      }).then((res) => {
        tableData.value = res.data.list;
        pageable.value.total = res.data.total;
      });
    }

    return () => (
      <SheltV2 title="我的绩效" more="查看全部" onViewDetail={viewDetail} question='<div><p>【该数据每日02:00更新一次】</p><p>我的绩效数据来源于钉钉宜搭，统计个人过往的绩效数据。</p></div>'>
        <Echarts option={option.value} />
        <ElDialog
          lock-scroll
          draggable
          v-model={dialogVisible.value}
          title="历史绩效"
          style={{ maxWidth: '800px', with: 'auto' }}
        >
          <ElDatePicker
            v-model={pageable.value.date}
            type="year"
            class="month_selector"
            range-separator="-"
            clearable={false}
            // @ts-ignore
            onChange={selectYear}
          />
          <ElTable
            header-row-class-name="table_header"
            size="small"
            data={tableData.value}
          >
            <ElTableColumn prop="date" label="考核月份" />
            <ElTableColumn prop="performance_grade" label="等级" />
            <ElTableColumn prop="performance_score" label="得分" />
            <ElTableColumn
            width="45px"
              label="操作"
              v-slots={{
                default: ({ row }: AnyObject) => (
                  <div
                    class="co-7 hover-color"
                    onClick={() => viewPerformanceDetail(row)}
                  >
                    详情
                  </div>
                )
              }}
            ></ElTableColumn>
          </ElTable>
          <ElPagination
            v-model:current-page={pageable.value.page}
            v-model:page-size={pageable.value.pageSize}
            small
            page-sizes={[15, 30, 50, 100]}
            hide-on-single-page
            layout="total, sizes, prev, pager, next, jumper"
            total={pageable.value.total}
            onSize-change={handleSizeChange}
            onCurrent-change={handleCurrentChange}
          ></ElPagination>
        </ElDialog>
        <ItemTable
          ref={itemTableRef}
          id={pageable.value.id}
          title={detailTitle.value}
        />
      </SheltV2>
    );
  }
});
